<template>
  <view class="main-box">
    <view class="title-box">
      提现至
      <image src="/static/images/8.png"></image>
      微信
    </view>
    <view class="input-box">
      <view class="name">
        提现金额
      </view>
      <view class="value">
        <input v-model="money" type="number" placeholder="请输入" />
        <view class="btn" @click="money = userInfo.cash_money">全部</view>
      </view>
    </view>
    <!-- 		<view class="span">服务费5%,¥2.00</view> -->
    <view class="input-box">
      <view class="name">
        微信号
      </view>
      <view class="value">
        <input v-model="weixin" placeholder="请输入微信号" />
      </view>
    </view>
    <view class="img-box">
      <view class="name">微信二维码</view>
      <view class="list-d">
        <!-- <view class="li" v-for="(item,index) in imgList" :key="index">
					<image src="/static/images/img-del.png" @click="imgList.splice(index,1)" class="del"></image>
					<image :src="item"></image>
				</view> -->
        <view class="li" @click="chooseImage">
          <image :src="qrcode_url" v-if="qrcode_url"></image>

          <image src="/static/images/img-list.png" v-else></image>
        </view>
      </view>
    </view>
    <view class="btn-one" @click="submitFun">确认提交</view>
  </view>
</template>
<script>
import {
  setUserExtractCash,
  getUserMoneyMoney
} from '@/api/api.js';
import { HTTP_REQUEST_URL } from '@/config/app.js'
export default {
  name: 'userView',
  data() {
    return {
      statusBarHeight: 0,
      userInfo: {},
      tabValue: 0,
      weixin: '',
      qrcode_url: '',
      money: '',
      imgList: [],
      urlArr: [],
      submitMain: false
    }
  },
  onShow() {
    this.getUserMoneyMoneyFun();
  },
  methods: {
    submitFun() {
      if (!this.money) {
        uni.showToast({
          title: '请输入提现金额',
          icon: 'none'
        });
        return;
      }
      if (!this.weixin) {
        uni.showToast({
          title: '请输入微信号',
          icon: 'none'
        });
        return;
      }
      if (!this.qrcode_url) {
        uni.showToast({
          title: '请上传微信收款码',
          icon: 'none'
        });
        return;
      }
      if (this.submitMain) {
        uni.showToast({
          title: '请不要重复提交',
          icon: 'none'
        });
        return
      }
      this.submitMain = true;
      setUserExtractCash({
        extract_type: 'weixin',
        money: this.money,
        weixin: this.weixin,
        qrcode_url: this.qrcode_url
      }).then((res) => {
        this.submitMain = false;
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack()
        }, 2000)
      }).catch((err) => {
        this.submitMain = false;
        uni.showToast({
          title: err,
          icon: 'none'
        });
      })

    },
    getUserMoneyMoneyFun() {
      getUserMoneyMoney().then((res) => {
        this.userInfo = res.data
      })
    },
    chooseImage() {
      const that = this
      if (uni.getStorageSync('uploadImageTwo')) {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          success: async (res) => {
            const result = await that.uploadFileFun(res.tempFilePaths[0])
            that.qrcode_url = result.data.url
          }
        });
      } else {
        uni.showModal({
          title: '温馨提示',
          content: 'APP将调用您的手机的相册查看功能和拍照功能，用于上传图片,请确认授权',
          success(ress) {
            if (ress.confirm) {
              uni.setStorageSync('uploadImageTwo', true)
              uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                success: async (res) => {
                  const result = await that.uploadFileFun(res.tempFilePaths[0])
                  that.qrcode_url = result.data.url
                }
              });
            }
          }
        })
      }

    },
    async uploadFileFun(src) {
      let token = uni.getStorageSync('LOGIN_STATUS_TOKEN')

      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: HTTP_REQUEST_URL + '/api/newUpload',
          filePath: src,
          name: "file",
          header: {
            'Authorization': 'Bearer ' + token
          },
          success(res1) {
            resolve(JSON.parse(res1.data))
          },
          fail(res) {
            reject(res)
          }
        })
      })
    },
  }

}
</script>
<style lang="scss" scoped>
.main-box {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: #f0f4f9;
  .title-box {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    line-height: 100rpx;
    color: #444444;
    font-size: 30rpx;
    background-color: white;
    margin-top: 4rpx;
    image {
      width: 56rpx;
      height: 56rpx;
      display: inline-block;
      vertical-align: top;
      border-radius: 50%;
      margin: 22rpx 10rpx 0 50rpx;
      overflow: hidden;
    }
  }
  .input-box {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    line-height: 100rpx;
    color: #444444;
    font-size: 30rpx;
    background-color: white;
    margin-top: 10rpx;
    .name {
      width: 160rpx;
      display: inline-block;
      vertical-align: top;
    }
    .value {
      width: calc(100% - 160rpx);
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      input {
        width: calc(100% - 100rpx);
        display: inline-block;
        vertical-align: top;
        height: 100rpx;
      }
      .btn {
        float: right;
        color: #ff5733;
      }
    }
  }
  .span {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    line-height: 60rpx;
    color: #d43030;
    font-size: 24rpx;
    margin-bottom: 20rpx;
  }
  .img-box {
    width: 100%;
    margin: 4rpx auto;
    background-color: white;
    color: #000000;
    padding: 0 30rpx 30rpx 30rpx;
    background-color: white;
    color: #000000;
    font-size: 30rpx;
    line-height: 40rpx;
    overflow: hidden;
    .name {
      line-height: 60rpx;
      margin-top: 20rpx;
    }
    .list-d {
      width: 100%;
      .li {
        width: 160rpx;
        height: 160rpx;
        display: inline-block;
        vertical-align: top;
        margin: 15rpx 15rpx 0 0;
        position: relative;
        image {
          width: 100%;
          height: 100%;
          display: inline-block;
          vertical-align: top;
          position: relative;
          z-index: 1;
        }
        .del {
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          right: -20rpx;
          top: -20rpx;
          z-index: 2;
        }
      }
    }
  }
  .btn-one {
    width: 586rpx;
    line-height: 100rpx;
    border-radius: 50rpx;
    margin: 40rpx auto;
    text-align: center;
    background-color: #2767e6;
    color: white;
    font-size: 30rpx;
  }
}
</style>
